<template>
  <div>
    <div class="devicecludstatusModel" :class="dataSource.length == 0 ? 'mb20' : ''">
      <a-table
        size="small"
        bordered
        :dataSource="dataSource"
        :columns="columns"
        :pagination="ipagination"
        :loading="listLoading"
        :rowClassName="setRowClassName"
        @change="handleTableChange"
      >
        <template #sync_status="{ text }">
          <span :class="text == '同步失败' ? 'redcolor' : ''">{{ text }}</span>
        </template>
        <!-- :disabled="record.sync_status!='同步成功'?false:true" -->
        <template #action="{ record }">
          <a-button type="primary" @click.stop="manualsync(record.id)">手动同步</a-button>
          <a-button style="margin-left: 10px" type="primary" @click.stop="customsync(record)"
            >自定义同步</a-button
          >
        </template>
      </a-table>
    </div>

    <customtbModel ref="customtbModel" @finishcustom="getList" />
  </div>
</template>
<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { devicecloudList, syndeviceinfo } from '/@/api/sys/gateway/gateway';
  import { useMessage } from '/@/hooks/web/useMessage';
  import moment from 'moment';
  import customtbModel from '../device/subEquipment/customtbModel.vue';
  export default defineComponent({
    components: {
      customtbModel,
    },
    setup() {
      const { createMessage } = useMessage();
      const visible = ref(false);
      const customtbModel = ref();
      const listLoading = ref(false);
      //分页参数
      const ipagination = reactive({
        current: 1,
        pageSize: 30,
        pageSizeOptions: ['10', '30', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showSizeChanger: true,
        total: 0,
      });

      const title = ref(null);
      const cancel = () => {
        visible.value = false;
      };

      const setRowClassName = (record, index) => {
        let className = '';
        if (index % 2 === 1) className = 'darkrow';
        return className;
      };
      //分页参数
      const listQuery = reactive({
        page: 1,
        page_size: 10,
        device_id: '',
      });
      //手动同步
      function manualsync(id) {
        listLoading.value = true;
        syndeviceinfo({
          id: id,
        }).then((res) => {
          listLoading.value = false;
          createMessage.success('同步设备成功');
          getList();
        });
      }
      //自定义同步
      function customsync(row) {
        customtbModel.value.visible = true;
        customtbModel.value.formState.id = row.id;
        customtbModel.value.formState.device_id = row.detail.device_info.device_id;
        customtbModel.value.formState.gateway_device_id = row.detail.device_info.gateway_id;
      }

      //获取云状态列表
      function showTable(row) {
        title.value = row.name;
        listQuery.device_id = row.id;
        getList();
        visible.value = true;
      }

      //切换分页
      function handleTableChange(ipagination) {
        listQuery.page = ipagination.current;
        listQuery.page_size = ipagination.pageSize;
        getList();
      }
      const dataSource = ref([]);
      function getList() {
        listLoading.value = true;
        devicecloudList(listQuery).then((res) => {
          ipagination.total = res.total;
          listLoading.value = false;
          dataSource.value = res.list;
          dataSource.value.map((item) => {
            item.sync_timestamp = moment(parseInt(item.sync_timestamp) * 1000).format(
              'YYYY-MM-DD HH:mm',
            );
            item.sync_status = item.sync_status =
              item.sync_status == 1
                ? '未同步'
                : item.sync_status == 2
                ? '同步成功'
                : item.sync_status == 3
                ? '同步失败'
                : '';
            return Object.assign(item, item.detail.device_info);
          });
        });
      }
      return {
        customsync,
        manualsync,
        listLoading,
        showTable,
        getList,
        handleTableChange,
        ipagination,
        title,
        setRowClassName,
        visible,
        cancel,
        dataSource,
        customtbModel,
        columns: [
          {
            title: '平台名称',
            dataIndex: 'app_name',
            key: 'app_name',
            align: 'center',
          },
          {
            title: '同步状态',
            dataIndex: 'sync_status',
            key: 'sync_status',
            align: 'center',
            slots: { customRender: 'sync_status' },
          },
          {
            title: '错误信息',
            dataIndex: 'err_msg',
            key: 'err_msg',
            align: 'center',
          },
          {
            title: '通讯时间',
            dataIndex: 'sync_timestamp',
            key: 'sync_timestamp',
            align: 'center',
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            slots: { customRender: 'action' },
          },
        ],
      };
    },
  });
</script>

<style lang="less">
  .darkrow {
    background-color: #fafafa;
  }
  .title {
    color: #000;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 15px;
  }
  .devicecludstatusModel {
    padding: 0px 20px !important;
    box-sizing: border-box;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .clickRowStyl,
  .ant-table-tbody > .clickRowStyl:hover > td {
    background-color: #f4ac0a;
    color: #fff;
  }

  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: transparent !important;
  }
  .redcolor {
    color: red;
  }
</style>
